<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="templates/general.xhtml">

    <ui:define name="title"><h:outputText value="Please Sign Up" /></ui:define>
    <ui:define name="header"><h:outputText value="Please Sign Up" /></ui:define>


    <ui:define name="content">
        <h:form id="signUpForm">
            <p:fieldset styleClass="fieldset" legend="Registration Form">
                <p:focus />
                <p:messages id="messages" globalOnly="true" />
                <h:panelGrid id="regPanelGrid" style="margin: 0 auto; margin-top: 30px; text-align: right" cellspacing="8" columns="3">

                    <h:panelGroup>
                        <h:outputText value="User Name:" />
                        <h:outputText style="color:red" value=" * " />
                    </h:panelGroup>
                    <p:inputText id="userName" value="#{createUserService.user.userName}" required="true" label="User Name" title="Enter your user name">
                        <f:validateLength minimum="2" />
                    </p:inputText>
                    <p:tooltip for="userName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />

                    <h:panelGroup>
                        <h:outputText value="E-mail:" />
                        <h:outputText style="color:red" value=" * " />
                    </h:panelGroup>
                    <p:inputText id="email" value="#{createUserService.user.email}" 
                                 required="true" 
                                 label="E-mail"
                                 title="Enter your e-mail"
                                 validatorMessage="Invalid email format">
                        <f:validateLength minimum="2" />
                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                        <p:ajax event="keyup" update="emailMsg" global="false"/>
                    </p:inputText>
                    <h:panelGroup>
                        <p:message id="emailMsg" for="email" />
                        <p:tooltip for="email" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
                    </h:panelGroup>

                    <h:panelGroup>
                        <h:outputText value="First Name:" />
                        <h:outputText style="color:red" value=" * " />
                    </h:panelGroup>
                    <p:inputText id="firstName" value="#{createUserService.user.firstName}" required="true" label="First Name" title="Enter your first name">
                        <f:validateLength minimum="2" />
                        <p:ajax event="keyup" update="firstNameMsg" global="false"/>
                    </p:inputText>
                    <h:panelGroup>
                        <p:message id="firstNameMsg" for="firstName" />
                        <p:tooltip for="firstName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
                    </h:panelGroup>


                    <h:panelGroup>
                        <h:outputText value="Last Name:" />
                        <h:outputText style="color:red" value=" * " />
                    </h:panelGroup>
                    <p:inputText id="lastName" value="#{createUserService.user.lastName}" required="true" label="Last Name" title="Enter your last name">
                        <f:validateLength minimum="2" />
                        <p:ajax event="keyup" update="lastNameMsg" global="false"/>
                    </p:inputText>
                     <h:panelGroup>
                        <p:message id="lastNameMsg" for="lastName" />
                        <p:tooltip for="lastName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
                    </h:panelGroup>
                    
                    <h:panelGroup>
                        <h:outputText value="Password:" />
                        <h:outputText style="color:red" value=" * " />
                    </h:panelGroup>
                    <p:password id="pass" value="#{createUserService.user.password}" required="true" label="Password" title="Enter a password" feedback="true" match="repeatPass">
                        <f:validateLength minimum="4" />
                    </p:password>
                    <h:outputText />

                    <h:panelGroup>
                        <h:outputText value="Repeat Password:" />
                        <h:outputText style="color:red" value=" * " />
                    </h:panelGroup>
                    <p:password id="repeatPass" required="true" label="Password" title="Repeat a password" />

                    <h:outputText />

                    <p:button id="backToSignInButton" outcome="login" icon="ui-icon-arrowreturnthick-1-w" value="Back to Sign In" />
                    <p:commandButton id="submitButton" action="#{createUserService.createUser()}" update="regPanelGrid,messages" icon="ui-icon-check" value="Sign me Up!" ajax="false" />

                </h:panelGrid>
            </p:fieldset>
        </h:form>
    </ui:define>

</ui:composition>

